<template>
  <div id="regist">
    <h1>注册账号</h1>
    <!-- 输入任意文本 -->
    <van-field v-model="text" label="用户名/昵称" />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="手机号" />

    <van-field
      v-model="sms"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button
          size="small"
          type="primary"
          color="#e54847"
          @click="getVerify"
          >发送验证码</van-button
        >
      </template>
    </van-field>
    <!-- 允许输入正整数，调起纯数字键盘 -->
    <van-field v-model="digit" type="digit" label="输入密码" />
    <!-- 允许输入数字，调起带符号的纯数字键盘 -->
    <van-field v-model="password" type="password" label="确认密码" />
    <br /><br /><br />
    <van-button
      type="primary"
      color="#e54847"
      round
      size="large"
      @click="goRegist"
      >注册!并去登陆</van-button
    >
  </div>
</template>

<script>
import { createApp } from "vue";
import { Dialog } from "vant";

export default {
  name: "Regist",
  data() {
    return {
      tel: "",
      text: "",
      digit: "",
      number: "",
      password: "",
      sms: "",
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    async getVerify() {
      let data = await this.$axios.get(
        "http://phpclub.org.cn:8080/api/user/sendVerify?mobile=" + this.tel
      );
      console.log(data);
      if (data.code == 0) {
        Dialog.alert({
          title: "您的验证码为:",
          message: data.data.verifyCode,
        });
      } else {
        Dialog.alert({
          title: "错误",
          message: data.msg,
        });
      }
    },

    async goRegist() {
      let data = await this.$axios.post(
        "http://phpclub.org.cn:8080/api/user/register",
        { mobile: this.tel, verifyCode: this.sms, password: this.password }
      );
      if(data.code == 0){
          Dialog.alert({
          title: "恭喜注册成功!",
          message: data.data.nickname+"你好!",
          theme: "round-button",
        }).then(() => {
          // on close
          this.$router.push('login');
      });
      }else{
        Dialog.alert({
          title: "错误!",
          message: data.msg,
          theme: "round-button",
        })
      }
    },
  },
};
</script>

<style scoped>
</style>